﻿
@{
    ViewBag.Title = "PasswordMeter";
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Password meter</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Miscellaneous</a>
            </li>
            <li class="active">
                <strong>Password meter</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>

<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Password meter</h5>
                </div>

                <div class="ibox-content">

                    <p class="font-bold">
                        Password Strength Meter for Twitter Bootstrap
                    </p>

                    <p>The jQuery Password Strength Meter is a plugin for Twitter Bootstrap that provides rulesets for visualy displaying the quality of a users typed in password.</p>


                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Basic example </h5>
                </div>
                <div class="ibox-content">
                    <form role="form">
                        <div class="row" id="pwd-container1">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="password1">Password</label>
                                    <input type="password" class="form-control example1" id="password1" placeholder="Password" value="Passwo">
                                </div>
                                <div class="form-group">
                                    <div class="pwstrength_viewport_progress"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <pre>
var options1 = {};
options1.ui = {
    container: "#pwd-container",
    showVerdictsInsideProgressBar: true,
    viewports: {
        progress: ".pwstrength_viewport_progress"
    }
};
options1.common = {
    debug: false
};
$('.example1').pwstrength(options1);
                            </pre>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Show the password strength as a status in the field </h5>
                </div>
                <div class="ibox-content">
                    <form role="form">
                        <div class="row" id="pwd-container2">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="password2">Password</label>
                                    <input type="password" class="form-control example2" id="password2" placeholder="Password" value="Pass">
                                </div>
                                <div class="form-group">
                                    <div class="pwstrength_viewport_verdict"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <pre>
var options2 = {};
options1.ui = {
    container: "#pwd-container2",
    showStatus: true,
    showProgressBar: false,
    viewports: {
        verdict: ".pwstrength_viewport_verdict"
    }
};
$('.example2').pwstrength(options2);
                            </pre>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Interact with other inputs  </h5>
                </div>
                <div class="ibox-content">
                    <form role="form">
                        <div class="row" id="pwd-container3">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="username">Username</label>
                                    <input type="text" class="form-control" id="username" placeholder="Username">
                                </div>
                                <div class="form-group">
                                    <label for="password3">Password</label>
                                    <input type="password" class="form-control example3" id="password3" placeholder="Password">
                                </div>
                                <div class="form-group">
                                    <div class="pwstrength_viewport_progress2"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <pre>
var options3 = {};
options3.ui = {
    container: "#pwd-container3",
    showVerdictsInsideProgressBar: true,
    viewports: {
        progress: ".pwstrength_viewport_progress2"
    }
};
options3.common = {
    debug: true,
    usernameField: "#username"
};
$('.example3').pwstrength(options3);
                            </pre>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Use zxcvbn to calculate the password strength</h5>
                </div>
                <div class="ibox-content">
                    <form role="form">
                        <div class="row" id="pwd-container4">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="year">Year of birth</label>
                                    <input type="text" class="form-control" id="year" value="2016">
                                </div>
                                <div class="form-group">
                                    <label for="familyname">Family Name</label>
                                    <input type="text" class="form-control" id="familyname" placeholder="Name" value="Tokugawa">
                                </div>
                                <div class="form-group">
                                    <label for="password4">Password</label>
                                    <input type="password" class="form-control example4" id="password4" placeholder="Password">
                                </div>
                                <div class="form-group">
                                    <span class="font-bold pwstrength_viewport_verdict4"></span>
                                    <span class="pwstrength_viewport_progress4"></span>

                                    <p>The content of the form inputs and the words <em>samurai, shogun, bushido, daisho</em> and <em>seppuku</em> are disrecommended in the password, and the score will adjust properly.</p>
                                </div>
                            </div>
                        </div>
                    </form>
                    <pre>
var options4 = {};
options4.ui = {
    container: "#pwd-container4",
    viewports: {
        progress: ".pwstrength_viewport_progress4",
        verdict: ".pwstrength_viewport_verdict4"
    }
};
options4.common = {
    zxcvbn: true,
    zxcvbnTerms: ['samurai', 'shogun', 'bushido', 'daisho', 'seppuku'],
    userInputs: ['#year', '#familyname']
};
$('.example4').pwstrength(options4);
                            </pre>
                </div>
            </div>
        </div>
    </div>
</div>


@section Scripts {
    @Scripts.Render("~/plugins/passwordMeter")

    <script type="text/javascript">
        $(document).ready(function () {

            // Example 1
            var options1 = {};
            options1.ui = {
                container: "#pwd-container1",
                showVerdictsInsideProgressBar: true,
                viewports: {
                    progress: ".pwstrength_viewport_progress"
                }
            };
            options1.common = {
                debug: false,
            };
            $('.example1').pwstrength(options1);

            // Example 2
            var options2 = {};
            options2.ui = {
                container: "#pwd-container2",
                showStatus: true,
                showProgressBar: false,
                viewports: {
                    verdict: ".pwstrength_viewport_verdict"
                }
            };
            $('.example2').pwstrength(options2);

            // Example 3
            var options3 = {};
            options3.ui = {
                container: "#pwd-container3",
                showVerdictsInsideProgressBar: true,
                viewports: {
                    progress: ".pwstrength_viewport_progress2"
                }
            };
            options3.common = {
                debug: true,
                usernameField: "#username"
            };
            $('.example3').pwstrength(options3);

            // Example 4
            var options4 = {};
            options4.ui = {
                container: "#pwd-container4",
                viewports: {
                    progress: ".pwstrength_viewport_progress4",
                    verdict: ".pwstrength_viewport_verdict4"
                }
            };
            options4.common = {
                zxcvbn: true,
                zxcvbnTerms: ['samurai', 'shogun', 'bushido', 'daisho', 'seppuku'],
                userInputs: ['#year', '#familyname']
            };
            $('.example4').pwstrength(options4);

        });
    </script>
}